<template>
	<div class="msg-content">
    <a class="msg">以下用户已添加至黑名单，你将不再收到对方的消息</a>

		<NoContent :show="blackList.length == 0" text="暂无黑名单用户"/>

		<a class="msg" v-for="black in blackList">
			<span><img :src="$api.preview(black.avatar)"/>{{ black.nickName ?? black.tel }}</span>
			<button class="btn" @click.prevent="unbindBlack(black.id)">解除</button>
		</a>

    <VanPagination v-model="page" :totalItems="total" @click-page="queryBlackList"
                   :itemsPerPage="rows" :showPageSize="5" :forceEllipses="true"/>
	</div>
</template>

<script>
import NoContent from '../NoContent.vue' ;
import VanPagination from "../VanPagination.vue";
	
export default {
	components: {
    VanPagination,
		NoContent, 
	} , 
	data(){
		return {
      page: 1,
      rows: 10,
      total: 0 ,
			blackList: [],
		}
	},
  created() {
     this.queryBlackList();
  },
  methods: {
     queryBlackList() {
       this.$api.queryBlackListByPage(this.page, this.rows).then(ret=> {
          if (ret.status) {
             this.blackList = ret.data.records ;
             this.total = ret.data.total ;
          }
       })
     },
    unbindBlack(id) {
       this.$api.unbindBlackUser(id).then(ret=> {
          if (ret.status) {
            this.queryBlackList();
          }
       })
    }
  }
}
</script>

<style scoped>
.msg {
  height: 45px;
}
</style>